<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>4_15作业</title>


  <style>
    .box{
      display: flex;
      width: 100%;
      height: 550px;
      text-decoration-line: none;/*去下划线*/
    }


    .MainMenu{
      width: 15%;
      height: 100%;
      flex-wrap: nowrap;/*不换行*/
      line-height: 2em;/**行间距*/
      text-indent: 5px;/*首行缩进*/
      padding-left: 0px;
      margin-top: 80px;
      margin-left: 100px;
    }
    .MainMenu li{
      display: flex;
      flex-wrap: wrap;/*内容超出换行*/
      padding-left: 10px;
    }

    .MainMenu li:hover{
      background-color: #cccccc;
    }
    .MainMenu a:focus{
      color:red;
      cursor: auto;
    }


    .MainMenu li div:hover{
      color:red;
    }

    .MainMenu-work ul{
      width: 750px;
      height: 550px;
      position: absolute;
      left: 340px;
      top: 88px;
      display: none;/*子菜单隐藏*/
      /*transition:all 1s;*/
    }

    /*办公的点击效果*/
    .MainMenu-work:hover ul{
      display: flex;
      flex-wrap: wrap;
    }

    .li1 div{
      background-color: black;
      color: white;
      font-size: 20px;
      height: 30px;
      text-align: center;
      line-height: 30px;
    }

    .li2{
      flex-wrap: nowrap;
    }
    .li2-div2{
      flex-wrap: nowrap;
      color: #8b8b8b;
      /*font-size: 15px;*/
      width: 600px;
      height: 500px;
      line-height: 3em;
    }

    .li2-div2 div{
      flex-wrap: wrap;
    }
  </style>
</head>
<body>
<section class="box">
  <!--  主菜单-->

  <ul class="MainMenu">

    <li><div>家用电器</div></li>

    <li >
      <div>手机 </div> /<div> 运营商 </div> /<div> 数码 </div>
    </li>

    <li>
      <div>电脑 </div> /
      <section class="MainMenu-work"> 办公
        <ul>
          <li style="width: 100%;height: 50px;align-content: center" class="li1">
            <div style="margin-left: 0px">&#160; 电脑办公 &gt;&#160;&#160;</div>
            <div style="margin-left: 10px">&#160; 企业采购 &gt;&#160;&#160;</div>
            <div style="margin-left: 10px">&#160; GAME+ &gt;&#160;&#160;</div>
            <div style="margin-left: 10px">&#160; 装机大师 &gt;&#160;&#160;</div>
            <div style="margin-left: 10px">&#160; 企业租赁 &gt;&#160;&#160;</div>
          </li>
          <li style="width: 100%;height: 500px;" class="li2">
            <div style="width: 110px;color: black;">
              <div style="margin-top: 5px;">电脑整机 &gt;</div>
              <div style="margin-top: 10px;">电脑配件 &gt;</div>
              <div style="margin-top: 25px;">外设产品 &gt;</div>
              <div style="margin-top: 25px;">游戏设备 &gt;</div>
              <div style="margin-top: 20px;">网络产品 &gt;</div>
              <div style="margin-top: 0px;">办公设备 &gt;</div>
              <div style="margin-top: 30px;">文具 &gt;</div>
              <div style="margin-top: 25px;">耗材 &gt;</div>
              <div style="margin-top: 15px;">服务产品 &gt;</div>
            </div>


            <div class="li2-div2">
              <div>
                <a>笔记本 &#160;</a><a>游戏本 &#160;</a><a>平板电脑 &#160;</a><a>台式机 &#160;</a><a>一体机 &#160;</a><a>服务器/工作站 &#160;</a>
              </div>

              <div style="line-height: 1.5em">
                <a>显示器 &#160;</a><a>CPU &#160;</a><a>主板 &#160;</a><a>显卡 &#160;</a><a>硬盘 &#160;</a>
                <a>内存 &#160;</a><a>机箱 &#160;</a><a>电源 &#160;</a><a>散热器 &#160;</a><a>显示器支架 &#160;</a>
                <a>刻录机/光驱 &#160;</a><a>SSD固态硬盘 &#160;</a><a>组装电脑 &#160;</a><a>USB分线器 &#160;</a>
                <a>主板CPU套装 &#160;</a>
              </div>

              <div style="line-height: 1.5em;margin-top: 10px">
                <a>鼠标 &#160;</a><a>键盘 &#160;</a><a>键盘套装 &#160;</a><a>网络仪表仪器 &#160;</a><a>U盘 &#160;</a><a>移动固态硬盘 &#160;</a>
                <a>鼠标垫 &#160;</a><a>摄像头 &#160;</a><a>电脑工具 &#160;</a><a>电脑清洁 &#160;</a><a>UPS电源 &#160;</a>
                <a>插座 &#160;</a><a>平板电脑配件 &#160;</a><a>笔记本配件 &#160;</a>
              </div>

              <div>
                <a>游戏机 &#160;</a><a>游戏耳机 &#160;</a><a>手柄/方向盘 &#160;</a><a>游戏软件 &#160;</a><a>游戏周边 &#160;</a>
              </div>

              <div>
                <a>路由器 &#160;</a><a>网络机顶盒 &#160;</a><a>交换机 &#160;</a><a>网络储存 &#160;</a><a>网卡 &#160;</a>
                <a>5G/4G上网 &#160;</a><a>网线 &#160;</a><a>网络配件 &#160;</a>
              </div>

              <div style="line-height: 1.5em">
                <a>投影机 &#160;</a><a>投影配件 &#160;</a><a>打印机 &#160;</a><a>传真设备 &#160;</a><a>验钞/点钞机 &#160;</a>
                <a>扫描设备 &#160;</a><a>复合机 &#160;</a><a>碎纸机 &#160;</a><a>考勤门 &#160;</a><a>保险柜 &#160;</a>
                <a>装订/封装机 &#160;</a><a>安防监控 &#160;</a><a>白板 &#160;</a>
              </div>

              <div style="line-height: 1.5em;margin-top: 10px;">
                <a>笔类 &#160;</a><a>本册/便签 &#160;</a><a>办公文具 &#160;</a><a>文件收纳 &#160;</a><a>学生文具 &#160;</a>
                <a>计算器 &#160;</a><a>画具画材 &#160;</a><a>财会用品 &#160;</a><div>文房四宝 &#160;</div>
              </div>

              <div>
                <a>硒鼓/墨粉 &#160;</a><a>墨盒 &#160;</a><a>色带 &#160;</a><a>纸类 &#160;</a><a>刻录光盘 &#160;</a>

                <div>
                  <a>延保服务 &#160;</a><a>上门安装 &#160;</a><a>维修保养 &#160;</a><a>电脑软件 &#160;</a>
                </div>


              </div>
            </div>
          </li>
        </ul>
      </section>
    </li>

    <li style="display: flex">
      <div>家居 </div> /<div> 家具 </div> /<div> 家装 </div> /<div> 厨具 </div>
    </li>

    <li><div>男装 </div> /<div> 女装 </div> /<div> 童装 </div> /<div> 内衣 </div></li>

    <li><div>美妆 </div> /<div> 个护清洁 </div> /<div> 宠物 </div></li>

    <li><div>女鞋 </div> /<div> 箱包 </div> /<div> 珠宝 </div> /<div> 钟表 </div></li>

    <li><div>男鞋 </div> /<div> 运动 </div> /<v> 户外 </v></li>

    <li><div>房产 </div> /<div> 汽车 </div> /<div> 汽车用品 </div></li>

    <li><div>母婴 </div> /<div> 玩具乐器 </div></li>

    <li><div>食品 </div> /<div> 酒类 </div> /<div> 生鲜 </div> /<div> 特产 </div></li>

    <li><div>艺术 </div> /<div> 礼品鲜花 </div> /<div> 农资绿植 </div></li>

    <li><div>医药保健 </div> /<div> 计生情趣 </div></li>

    <li><div>图书 </div> /<div> 文娱 </div> /<div> 教育 </div> /<div> 电子书 </div></li>

    <li><div>机票 </div> /<v> 酒店 </v> /<div> 旅游 </div> /<v> 生活 </v></li>

    <li><div>理财 </div> /<div> 众筹 </div> /<div> 白条 </div> /<div> 保险 </div></li>

    <li><div>室装 </div> /<div> 维修 </div> /<div> 清洁 </div> /<div> 二手 </div></li>

  </ul>


</section>
</body>
</html>
